<template>
  <div class="home" @touchstart="handleTouchStart" @touchend="handleTouchEnd">
    <!-- Hero主视觉区 - 全屏背景 -->
    <section class="hero-section" ref="heroSection">
      <!-- 背景图片层 -->
      <div class="hero-background">
        <img
          src="/images/hero-illustration.png"
          alt="小岛屿主视觉插图"
          class="hero-bg-image"
        />
        <div class="hero-overlay"></div>
      </div>

      <!-- 内容层 -->
      <div class="hero-content">
        <div class="container">
          <div class="hero-text animate-fade-in-up">
            <h1 class="hero-title">
              {{ props.config?.appInfo?.subtitle || '让每一座小岛屿<br />都不再是一座孤岛'
              }}
            </h1>
            <p class="hero-subtitle">
              <span class="mobile-break"
                >把兴趣翻译成坐标，把孤岛连成群岛。<br />
                小岛屿，即刻组队出发。</span
              >
            </p>
            <div class="hero-buttons">
              <button class="btn btn-primary" @click="scrollToDownload">
                <svg
                  width="20"
                  height="20"
                  viewBox="0 0 24 24"
                  fill="currentColor"
                >
                  <path d="M5,20H19V18H5M19,9H15V3H9V9H5L12,16L19,9Z" />
                </svg>
                立即登岛
              </button>
              <router-link to="/values" class="btn btn-secondary aboutUs">
                <svg
                  width="20"
                  height="20"
                  viewBox="0 0 24 24"
                  fill="currentColor"
                >
                  <path
                    d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5 2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
                  />
                </svg>
                了解我们
              </router-link>
            </div>
          </div>
        </div>
      </div>

      <!-- 滚动提示 -->
      <div class="scroll-indicator" @click="scrollToNext">
        <div class="scroll-arrow">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
            <path
              d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z"
            />
          </svg>
        </div>
        <span class="scroll-text">向下滚动</span>
      </div>
    </section>

    <!-- 数据展示 -->
    <section class="stats">
      <div class="container">
        <div class="stats-grid">
          <div class="stat-card animate-fade-in-up">
            <div class="stat-number" ref="statRef1">0</div>
            <div class="stat-label">万+孤独岛屿</div>
          </div>
          <div class="stat-card animate-fade-in-up">
            <div class="stat-number" ref="statRef2">0</div>
            <div class="stat-label">%用户为Z世代</div>
          </div>
          <div class="stat-card animate-fade-in-up">
            <div class="stat-number" ref="statRef3">0</div>
            <div class="stat-label">%硕士以上学历</div>
          </div>
          <div class="stat-card animate-fade-in-up">
            <div class="stat-number" ref="statRef4">0</div>
            <div class="stat-label">%获得情绪支持</div>
          </div>
        </div>
      </div>
    </section>

    <!-- 下载区域 -->
    <section id="download" class="download">
      <div class="container">
        <div class="download-content animate-fade-in-up">
          <h2 class="section-title">
            {{ props.config?.appInfo?.name || "小岛屿" }} - 准备好登岛了吗？
          </h2>
          <p class="download-description">
            {{
              props.config?.appInfo?.description
                ? props.config.appInfo.description.substring(0, 50) + "..."
                : "加入百万年轻岛屿居民的行列，找到属于你的心灵群岛"
            }}
          </p>

          <div class="download-badges">
            <!-- 苹果下载按钮 -->
            <button
              v-if="shouldShowIosButton"
              class="download-btn ios-btn"
              @click="download('ios')"
            >
              <svg
                width="28"
                height="28"
                viewBox="0 0 24 24"
                fill="currentColor"
              >
                <path
                  d="M18.71,19.5C17.88,20.74 17,21.95 15.66,21.97C14.32,22 13.89,21.18 12.37,21.18C10.84,21.18 10.37,21.95 9.1,22C7.79,22.05 6.8,20.68 5.96,19.47C4.25,17 2.94,12.45 4.7,9.39C5.57,7.87 7.13,6.91 8.82,6.88C10.1,6.86 11.32,7.75 12.11,7.75C12.89,7.75 14.37,6.68 15.92,6.84C16.57,6.87 18.39,7.1 19.56,8.82C19.47,8.88 17.39,10.1 17.41,12.63C17.44,15.65 20.06,16.66 20.09,16.67C20.06,16.74 19.67,18.11 18.71,19.5M13,3.5C13.73,2.67 14.94,2.04 15.94,2C16.07,3.17 15.6,4.35 14.9,5.19C14.21,6.04 13.07,6.7 11.95,6.61C11.8,5.46 12.36,4.26 13,3.5Z"
                />
              </svg>
              <div class="download-info">
                <span>App Store下载</span>
              </div>
            </button>

            <!-- 安卓下载按钮 -->
            <button
              v-if="shouldShowAndroidButton"
              class="download-btn android-btn"
              @click="download('android')"
            >
              <svg
                t="1758785108480"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="2435"
                width="24"
                height="24"
              >
                <path
                  d="M808.398269 218.955161c20.458525 11.691232 27.566623 37.753501 15.876521 58.213157l-65.330296 114.329713c119.461015 74.88989 203.198446 202.202702 217.966199 350.95283 2.492185 25.107214-17.227161 46.882472-42.457572 46.882472H85.333333c-25.230411 0-44.949757-21.775258-42.457571-46.882472 14.120124-142.220715 91.287453-264.84528 202.445704-340.790817l-71.137484-124.491726c-11.691232-20.459656-4.583135-46.521925 15.876521-58.213157 20.459656-11.691232 46.523055-4.583135 58.214287 15.876521l71.589581 125.281766c58.218808-25.812486 122.559011-40.113448 190.028856-40.113448 60.891832 0 119.233837 11.648283 172.825431 32.893457l67.465324-118.061775c11.691232-20.459656 37.754631-27.567753 58.214287-15.876521zM317.895488 554.666667c-23.563302 0-42.666667 19.102234-42.666667 42.666666s19.103364 42.666667 42.666667 42.666667c23.565563 0 42.666667-19.102234 42.666667-42.666667s-19.101104-42.666667-42.666667-42.666666z m384 0c-23.563302 0-42.666667 19.102234-42.666667 42.666666s19.103364 42.666667 42.666667 42.666667c23.565563 0 42.666667-19.102234 42.666667-42.666667s-19.101104-42.666667-42.666667-42.666666z"
                  p-id="2436"
                ></path>
              </svg>
              <div class="download-info">
                <span>{{ getAndroidButtonText }}</span>
              </div>
            </button>
          </div>

          <!-- 二维码展示区 -->
          <div class="qr-code-container">
            <!-- iOS二维码 -->
            <div v-if="shouldShowIosButton" class="qr-code">
              <img
                :src="props.config?.qrcodes?.ios"
                alt="iOS下载二维码"
                class="qr-image"
              />
              <p>使用iPhone相机扫描二维码</p>
            </div>

            <!-- Android二维码 -->
            <div v-if="shouldShowAndroidButton" class="qr-code">
              <img
                :src="props.config?.qrcodes?.android"
                alt="Android下载二维码"
                class="qr-image"
              />
              <p>使用安卓相机扫描二维码</p>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 应用预览图区域 -->
    <section
      v-if="props.config?.screenshots && props.config.screenshots.length > 0"
      class="screenshots"
    >
      <div class="container">
        <h2 class="section-title">应用预览</h2>
        <div class="screenshots-container">
          <!-- 横向滚动布局 -->
          <div class="screenshots-scroll-container">
            <div class="screenshots-grid">
              <div
                v-for="(screenshot, index) in props.config.screenshots"
                :key="index"
                class="screenshot-item animate-fade-in-up"
                :style="{ animationDelay: `${index * 0.1}s` }"
              >
                <img
                  :src="screenshot"
                  :alt="`应用截图 ${index + 1}`"
                  loading="lazy"
                  @click="openLightbox(screenshot)"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script setup>
import {
  ref,
  onMounted,
  onUnmounted,
  nextTick,
  defineProps,
  computed,
} from "vue";
import { useRouter } from "vue-router";

// 定义从父组件接收的props
const props = defineProps({
  config: {
    type: Object,
    default: () => ({}),
  },
  deviceType: {
    type: String,
    default: "other",
  },
  phoneModelInfo: {
    type: Object,
    default: () => ({
      brand: "unknown",
      model: "unknown",
      fullModel: "unknown",
    }),
  },
  isWechatBrowser: {
    type: Boolean,
    default: false,
  },
});

const router = useRouter();
const statRef1 = ref(null);
const statRef2 = ref(null);
const statRef3 = ref(null);
const statRef4 = ref(null);
const heroSection = ref(null);

// 计算属性：根据设备类型决定显示哪些下载按钮
const shouldShowIosButton = computed(() => {
  return props.deviceType === "ios" || props.deviceType === "other";
});

const shouldShowAndroidButton = computed(() => {
  return props.deviceType === "android" || props.deviceType === "other";
});

// 计算属性：获取当前设备对应的应用商店链接
const getAppStoreLink = computed(() => {
  if (
    props.deviceType === "android" &&
    props.phoneModelInfo.brand !== "unknown"
  ) {
    const brand = props.phoneModelInfo.brand.toLowerCase();
    const appStores = props.config?.downloadLinks?.appStores;

    if (appStores && appStores[brand]) {
      return appStores[brand];
    }
  }
  return null;
});

// 计算属性：获取Android按钮文本
const getAndroidButtonText = computed(() => {
  if (
    props.deviceType === "android" &&
    props.phoneModelInfo.brand !== "unknown"
  ) {
    const brand = props.phoneModelInfo.brand;
    const appStoreLink = getAppStoreLink.value;

    if (appStoreLink) {
      // 根据品牌显示对应的应用商店名称
      const brandNames = {
        samsung: "Galaxy Store",
        huawei: "华为应用市场",
        xiaomi: "小米应用商店",
        oppo: "OPPO软件商店",
        vivo: "vivo应用商店",
        oneplus: "OnePlus Store",
        meizu: "魅族应用商店",
      };
      return brandNames[brand.toLowerCase()] || `${brand}应用商店`;
    }
  }
  return "安卓下载";
});

// 触摸手势支持
let touchStartY = 0;
let touchEndY = 0;

// 滚动到下载区域
const scrollToDownload = () => {
  nextTick(() => {
    const downloadElement = document.getElementById("download");
    if (downloadElement) {
      const offsetTop = downloadElement.offsetTop - 80; // 考虑导航栏高度
      window.scrollTo({
        top: offsetTop,
        behavior: "smooth",
      });
    }
  });
};

// 滚动到下一个区域
const scrollToNext = () => {
  nextTick(() => {
    const statsElement = document.querySelector(".stats");
    if (statsElement) {
      const offsetTop = statsElement.offsetTop - 80; // 考虑导航栏高度
      window.scrollTo({
        top: offsetTop,
        behavior: "smooth",
      });
    }
  });
};

// 数字动画效果
const animateValue = (element, start, end, duration) => {
  let startTimestamp = null;
  const step = (timestamp) => {
    if (!startTimestamp) startTimestamp = timestamp;
    const progress = Math.min((timestamp - startTimestamp) / duration, 1);
    element.textContent = Math.floor(progress * (end - start) + start);
    if (progress < 1) {
      window.requestAnimationFrame(step);
    }
  };
  window.requestAnimationFrame(step);
};

// 下载处理
const download = (type) => {
  if (type === "ios" && props.config?.downloadLinks?.ios) {
    // iOS设备直接跳转到App Store
    console.log("跳转到iOS App Store");
    window.location.href = props.config.downloadLinks.ios;
  } else if (type === "android") {
    // Android设备智能跳转逻辑
    const brand = props.phoneModelInfo.brand.toLowerCase();
    const appStoreLink = getAppStoreLink.value;

    // 检查是否配置了直接下载APK的设备列表
    const directApkBrands = props.config?.directApkDownload?.deviceBrands || [];
    const shouldDirectDownload =
      props.config?.directApkDownload?.enabled &&
      directApkBrands.includes(brand);

    if (shouldDirectDownload) {
      // 直接下载APK
      console.log(`直接下载APK: ${brand}设备`);
      window.location.href = props.config.downloadLinks.android;
    } else if (appStoreLink) {
      // 跳转到对应品牌的应用商店
      console.log(`跳转到${brand}应用商城`);
      window.location.href = appStoreLink;
    } else {
      // 使用默认Android下载链接
      console.log(`使用默认Android下载链接`);
      window.location.href = props.config.downloadLinks.android;
    }
  }
};

// 打开截图查看器
const openLightbox = (screenshotSrc) => {
  // 这里可以触发父组件的lightbox功能
  // 或者直接在当前组件中实现lightbox
  console.log("打开截图查看器:", screenshotSrc);
};

// 触摸事件处理
const handleTouchStart = (e) => {
  touchStartY = e.touches[0].clientY;
};

const handleTouchEnd = (e) => {
  touchEndY = e.changedTouches[0].clientY;
  handleSwipeGesture();
};

const handleSwipeGesture = () => {
  const swipeThreshold = 50;
  const swipeDistance = touchStartY - touchEndY;

  // 向上滑动，滚动到下一个区域
  if (swipeDistance > swipeThreshold) {
    const currentScroll = window.pageYOffset;
    const windowHeight = window.innerHeight;

    // 如果在hero区域，滚动到stats区域
    if (currentScroll < windowHeight * 0.5) {
      scrollToNext();
    }
  }

  // 向下滑动，滚动到上一个区域
  if (swipeDistance < -swipeThreshold) {
    const currentScroll = window.pageYOffset;

    // 如果在stats区域，滚动到hero区域
    if (
      currentScroll > windowHeight * 0.5 &&
      currentScroll < windowHeight * 1.5
    ) {
      window.scrollTo({
        top: 0,
        behavior: "smooth",
      });
    }
  }
};

// 滚动动画观察器
const observerOptions = {
  threshold: 0.1,
  rootMargin: "0px 0px -50px 0px",
};

const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      entry.target.classList.add("animate-fade-in-up");

      // 如果是统计数字区域，启动数字动画
      if (entry.target.classList.contains("stats")) {
        setTimeout(() => {
          animateValue(statRef1.value, 0, 150, 2000);
          animateValue(statRef2.value, 0, 87, 2000);
          animateValue(statRef3.value, 0, 63, 2000);
          animateValue(statRef4.value, 0, 96, 2000);
        }, 300);
      }
    }
  });
}, observerOptions);

onMounted(() => {
  // 等待DOM加载完成后执行动画
  nextTick(() => {
    // 观察需要动画的元素
    const animatedElements = document.querySelectorAll(
      ".stats, .download, .screenshots"
    );
    animatedElements.forEach((el) => {
      observer.observe(el);
    });
  });
});

// 组件卸载时清理观察器
onUnmounted(() => {
  observer.disconnect();
});
</script>

<style scoped>
/* Hero区域样式 */
.hero-section {
  position: relative;
  height: 100vh;
  min-height: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* 了解我们按钮样式 - 全局生效 */
.hero-buttons .aboutUs {
  color: var(--primary-color);
}
.hero-buttons .aboutUs:hover {
  color: var(--text-light);
}

.hero-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.hero-bg-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    135deg,
    rgba(0, 0, 0, 0.4) 0%,
    rgba(0, 0, 0, 0.6) 100%
  );
  z-index: 2;
}

.hero-content {
  position: relative;
  z-index: 3;
  width: 100%;
  text-align: center;
  color: var(--text-light);
}

.hero-text {
  max-width: 800px;
  margin: 0 auto;
}

.hero-title {
  font-size: var(--font-5xl);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: var(--spacing-lg);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.hero-subtitle {
  font-size: var(--font-lg);
  font-weight: 400;
  margin-bottom: var(--spacing-xl);
  opacity: 0.95;
  line-height: 1.7;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.hero-buttons {
  display: flex;
  gap: var(--spacing-md);
  justify-content: center;
  flex-wrap: wrap;
}

.scroll-indicator {
  position: absolute;
  bottom: var(--spacing-lg);
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  color: var(--text-light);
  cursor: pointer;
  text-align: center;
  animation: bounce 2s infinite;
}

.scroll-arrow {
  margin-bottom: var(--spacing-xs);
}

.scroll-text {
  font-size: var(--font-sm);
  opacity: 0.8;
}

@keyframes bounce {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateX(-50%) translateY(0);
  }
  40% {
    transform: translateX(-50%) translateY(-10px);
  }
  60% {
    transform: translateX(-50%) translateY(-5px);
  }
}

/* 数据展示区域 */
.stats {
  padding: var(--spacing-xxl) 0;
  background: var(--background-light);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing-lg);
}

.stat-card {
  text-align: center;
  padding: var(--spacing-lg);
  background: var(--text-light);
  border-radius: 12px;
  box-shadow: var(--shadow-light);
  transition: all 0.3s ease;
}

.stat-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-medium);
}

.stat-number {
  font-size: var(--font-4xl);
  font-weight: 700;
  color: var(--primary-color);
  margin-bottom: var(--spacing-xs);
}

.stat-label {
  font-size: var(--font-base);
  color: var(--text-secondary);
  font-weight: 500;
}

/* 下载区域 */
.download {
  padding: var(--spacing-xxl) 0;
  background: var(--text-light);
}

.download-content {
  text-align: center;
  max-width: 600px;
  margin: 0 auto;
}

.download-description {
  font-size: var(--font-lg);
  color: var(--text-secondary);
  margin-bottom: var(--spacing-xl);
  line-height: 1.6;
}

.download-badges {
  display: flex;
  gap: var(--spacing-md);
  justify-content: center;
  margin-bottom: var(--spacing-xl);
  flex-wrap: wrap;
}

.download-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-md) var(--spacing-lg);
  border: 2px solid var(--border-color);
  border-radius: 12px;
  background: var(--text-light);
  color: var(--text-primary);
  font-size: var(--font-base);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  min-width: 200px;
}

.download-btn:hover {
  border-color: var(--primary-color);
  background: var(--primary-color);
  color: var(--text-light);
  transform: translateY(-2px);
  box-shadow: var(--shadow-medium);
}

.download-info span {
  display: block;
  font-size: var(--font-sm);
  opacity: 0.8;
}

.qr-code-container {
  display: flex;
  justify-content: center;
  gap: var(--spacing-md);
}

.qr-code {
  text-align: center;
  padding: var(--spacing-lg);
  background: var(--background-light);
  border-radius: 12px;
  border: 2px solid transparent;
  transition: all 0.3s ease;
}

.qr-image {
  width: 150px;
  height: 150px;
  border-radius: 8px;
  margin-bottom: var(--spacing-sm);
}

.qr-code p {
  font-size: var(--font-sm);
  color: var(--text-secondary);
  margin: 0;
}

/* 应用预览区域 */
.screenshots {
  padding: var(--spacing-xxl) 0;
  background: var(--background-light);
}

.screenshots-container {
  max-width: 1000px;
  margin: 0 auto;
}

/* 横向滚动样式 */
.screenshots-scroll-container {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--primary-color) transparent;
  width: 100%;
  padding-bottom: var(--spacing-sm);
}

.screenshots-scroll-container::-webkit-scrollbar {
  height: 6px;
}

.screenshots-scroll-container::-webkit-scrollbar-track {
  background: transparent;
}

.screenshots-scroll-container::-webkit-scrollbar-thumb {
  background: var(--primary-color);
  border-radius: 3px;
}

.screenshots-scroll-container::-webkit-scrollbar-thumb:hover {
  background: var(--secondary-color);
}

.screenshots-grid {
  display: flex;
  gap: var(--spacing-lg);
  padding: var(--spacing-sm) 0;
  width: max-content;
}

.screenshot-item {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow-light);
  transition: all 0.3s ease;
  cursor: pointer;
  flex-shrink: 0;
  width: 280px;
  height: 500px;
}

.screenshot-item:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-medium);
}

.screenshot-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

.screenshot-item:hover img {
  transform: scale(1.05);
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .hero-title {
    font-size: var(--font-4xl);
  }

  .hero-subtitle {
    font-size: var(--font-base);
    line-height: 1.6;
    max-width: 100%;
  }
}

@media (max-width: 768px) {
  .hero-section {
    min-height: 500px;
  }

  .hero-title {
    font-size: var(--font-3xl);
    margin-bottom: var(--spacing-md);
  }

  .hero-subtitle {
    font-size: var(--font-sm);
    margin-bottom: var(--spacing-lg);
    line-height: 1.5;
    padding: 0 var(--spacing-sm);
  }

  .hero-buttons {
    flex-direction: column;
    align-items: center;
  }

  .hero-buttons .btn {
    width: 100%;
    max-width: 280px;
  }

  .stats-grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
  }

  .download-badges {
    flex-direction: column;
    align-items: center;
  }

  .download-btn {
    width: 100%;
    max-width: 280px;
  }

  /* 平板端调整截图尺寸 */
  .screenshot-item {
    width: 260px;
    height: 460px;
  }
}

@media (max-width: 480px) {
  .hero-title {
    font-size: var(--font-2xl);
  }

  .hero-subtitle {
    font-size: var(--font-xs);
    line-height: 1.4;
    padding: 0 var(--spacing-xs);
  }

  /* 移动端小屏幕调整截图尺寸 */
  .screenshot-item {
    width: 280px;
    height: 500px;
  }

  .stat-card {
    padding: var(--spacing-md);
  }

  .stat-number {
    font-size: var(--font-3xl);
  }
}

/* 移动端特殊处理 */
.mobile-break {
  display: block;
  margin-top: var(--spacing-sm);
}

@media (min-width: 769px) {
  .mobile-break {
    display: block;
    margin-top: var(--spacing-md);
  }
}

@media (max-width: 768px) {
  .mobile-break {
    display: block;
    margin-top: var(--spacing-sm);
    text-align: left;
  }

  .hero-subtitle .mobile-break br {
    display: block;
    margin: var(--spacing-xs) 0;
  }
}

/* 移动端触摸优化 */
@media (max-width: 768px) {
  .hero-section {
    touch-action: pan-y;
  }

  .btn {
    min-height: 48px; /* 确保触摸目标足够大 */
    touch-action: manipulation;
  }

  .download-btn {
    min-height: 56px;
    touch-action: manipulation;
  }

  .screenshot-item {
    touch-action: manipulation;
  }

  /* 移动端滑动优化 */
  .screenshots-scroll-container {
    touch-action: pan-x;
  }

  /* 优化滚动性能 */
  .hero-section,
  .stats,
  .download,
  .screenshots {
    will-change: transform;
  }

  /* 移动端字体优化 */
  .hero-title {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  /* 移动端按钮点击效果 */
  .btn:active,
  .download-btn:active {
    transform: scale(0.98);
    transition: transform 0.1s ease;
  }
}
</style>
